<template>
  <div>
    <el-form ref="form" :model="plot" label-width="80px">
      <el-form-item label="">
        姓名：<el-input v-model="plot.name" style="width: 300px;padding-right: 50px" placeholder="请根据姓名查询"></el-input>
        用户名：<el-input v-model="plot.uname" style="width: 300px;padding-right: 50px" placeholder="请根据用户名查询"></el-input>
        组织机构：
        <el-select v-model="plot.orgId" placeholder="请根据组织机构查询" style="width: 300px; padding-right: 50px">
          <el-option v-for="org in orgList" :key="org.id" :label="org.orgName" :value="org.id"></el-option>
        </el-select>
        角色：<el-input v-model="plot.roleName" style="width: 300px;padding-right: 50px" placeholder="请根据角色查询"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-form ref="form" :model="tableData" label-width="80px" style="margin-top: 20px;margin-left: -45px" >
      <el-form-item>
        <el-button icon="el-icon-plus" size="small" @click="add">新增角色</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 96%;margin-left: 2%">
      <el-table-column label="序号" width="180" >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名  " width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.uname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.idno }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话号码" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.tel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.mailbox }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属组织机构" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ getOrgName(scope.row.orgId) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="登录状态" width="180">
        <template slot-scope="scope">
    <span style="margin-left 10px">
      {{ scope.row.loginStatue == 1 ? '已登录' : '未登录' }}
    </span>
        </template>
      </el-table-column>

      <el-table-column label="账号状态" width="180">
        <template slot-scope="scope">
    <span style="margin-left 10px">
      {{ scope.row.accountStatus == 1 ? '已禁用' : '已启用' }}
    </span>
        </template>
      </el-table-column>



      <el-table-column label="最后登录时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.lastTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="uppupwd(scope.row)">重置密码</el-button>
          <el-button size="mini" type="danger" @click="updstatue(scope.row)">
            {{ scope.row.accountStatus == 1 ? '启用' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-dialog :title=this.title :visible.sync="dialogFormVisible">
      <el-form :model="sysrole">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="sysrole.uname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件号" :label-width="formLabelWidth">
          <el-input v-model="sysrole.idno" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input v-model="sysrole.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="sysrole.mailbox" autocomplete="off"></el-input>
        </el-form-item>
        <el-form ref="form" :model="sysrole" :rules="rules" label-width="100px">
          <el-form-item label="密码" prop="upwd">
            <el-input v-model="sysrole.upwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input v-model="confirmPwd" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="sysrole.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属角色" :label-width="formLabelWidth">
          <el-input v-model="sysrole.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属组织机构" :label-width="formLabelWidth">
          <el-select v-model="sysrole.orgId" placeholder="请根据组织机构查询" style="width: 300px; padding-right: 50px">
            <el-option v-for="org in orgList" :key="org.id" :label="org.orgName" :value="org.id"></el-option>
          </el-select>
        </el-form-item>





        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPopulation">确 定</el-button>




      </el-form>


    </el-dialog>


    <el-dialog :title=this.title1 :visible.sync="dialogFormVisible2">

      <el-form :model="updpwd">
          <el-form ref="form" :model="updpwd" :rules="rules" label-width="100px">
            <el-form-item label="密码" prop="upwd">
              <el-input v-model="updpwd.upwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPwd1">
              <el-input v-model="confirmPwd1" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>

        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updatepwd">确 定</el-button>




      </el-form>


    </el-dialog>



    <el-dialog :title=this.title1 :visible.sync="dialogFormVisible1">
      <el-form :model="upduser">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="upduser.uname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="证件号" :label-width="formLabelWidth">
            <el-input v-model="upduser.idno" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" :label-width="formLabelWidth">
            <el-input v-model="upduser.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="upduser.mailbox" autocomplete="off"></el-input>
          </el-form-item>

          <el-form ref="form" :model="upduser" :rules="rules"  label-width="100px">
            <el-form-item label="密码" prop="upwd">
              <el-input v-model="upduser.upwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPwd2">
              <el-input v-model="confirmPwd2" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="upduser.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属角色" :label-width="formLabelWidth">
            <el-input v-model="upduser.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属组织机构" :label-width="formLabelWidth">
            <el-select v-model="upduser.orgId" placeholder="请根据组织机构查询" style="width: 300px; padding-right: 50px">
              <el-option v-for="org in orgList" :key="org.id" :label="org.orgName" :value="org.id"></el-option>
            </el-select>
          </el-form-item>
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updatePopulation">确 定</el-button>




      </el-form>


    </el-dialog>

  </div>
</template>

<script>


import {
  addUser,
  delUser,
  findSelectOrg,
  findUserList,
  getOrgName,
  updateUpwd,
  updateUser,
  updStatue
} from "@/api/community/user";

export default {


  data() {
    //这里存放数据"

    return {
      sysrole: {
        upwd:'',
      },
      rules: {
        confirmPwd: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: this.checkPassword, trigger: 'blur' }
        ],
        confirmPwd1: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: this.checkPassword1, trigger: 'blur' }
        ],
        confirmPwd2: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: this.checkPassword2, trigger: 'blur' }
        ]
      },
      confirmPwd: '',
      confirmPwd1: '',
      confirmPwd2: '',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      tableData:[],
      plot:{
        uname:'',
        name:'',
        orgId:'',
        roleName:'',
      },
      updpwd:{
        upwd:'',
      },
      upduser:{
        upwd:'',
      },
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      title:'新增',
      title1:'编辑',
      arr:{
        // name:''
      },
      orgList: [],
      aa:0,
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",

  methods: {
    updstatue(val){
      updStatue(val.id).then(
        res => {
          this.$message.success("修改成功")
          this.list()
        }
      )
    },
    checkPassword(rule, value, callback) {
      if (value === this.sysrole.upwd) {
        callback(new Error('OK啊老铁'));
      } else {
        callback(new Error('不OK啊老铁'));
      }
    },
    checkPassword1(rule, value, callback) {
      if (value === this.updpwd.upwd) {
        callback(new Error('OK啊老铁'));
      } else {
        callback(new Error('不OK啊老铁'));
      }
    },
    checkPassword2(rule, value, callback) {
      if (value === this.upduser.upwd) {
        callback(new Error('OK啊老铁'));
      } else {
        callback(new Error('不OK啊老铁'));
      }
    },

  watch: {
    'confirmPwd'(newVal) {
      if (newVal !== this.sysrole.upwd) {
        this.$refs.form.validateField('confirmPwd');
      }
    },
    'confirmPwd1'(newVal) {
      if (newVal !== this.updpwd.upwd) {
        this.$refs.form.validateField('confirmPwd1');
      }
    },
    'confirmPwd2'(newVal) {
      if (newVal !== this.upduser.upwd) {
        this.$refs.form.validateField('confirmPwd2');
      }
    }
  },
    getOrgName(orgId) {
      // 假设orgList是你存储组织机构信息的数据
      const org = this.orgList.find(org => org.id === orgId);
      return org ? org.orgName : ''; // 如果找到对应的组织机构就返回名称，否则返回空字符串
    },
    getOrganizationList() {
      findSelectOrg().then(res => {
          this.orgList=res.data;
          console.log(res.data);
        }
      )
    },
    updatepwd(){
      updateUpwd(this.updpwd).then(
        res => {
          this.$message.success("修改成功");
          this.dialogFormVisible2=false
          this.list()
        }
      )
    },
    uppupwd(val){
      this.dialogFormVisible2=true
    },

    handleEdit(val){

      this.dialogFormVisible1=true
      this.upduser=val
      this.aa=val.id;

    },
    updatePopulation(aa){
      updateUser(this.upduser).then(
        res => {
          this.$message.success("修改成功");
          this.dialogFormVisible1=false
          this.list()
        }
      )
    },



    handleDelete(val){
      delUser(val.id).then(
        res => {
          this.$message.success("删除成功")
          this.list()
        }
      )
    },
    addPopulation(){
      addUser(this.sysrole).then(
        res => {
          this.$message.success(res.msg)
          this.dialogFormVisible=false
          this.list()
        }
      )
    },
    list(){
      findUserList(this.plot).then(res => {
          this.tableData=res.data
          console.log(res);
        }
      )
    },

    add(){
      this.dialogFormVisible=true

    },
    onSubmit(){
      this.list();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.list();
    this.getOrganizationList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
<style>
/* 如果需要，可以添加以下CSS到您的样式表中 */
.card-wrapper {
  /* 可以添加一些额外的样式来控制卡片的间距或布局 */
}

.custom-card .card-header {
  /* 根据需要自定义标题区域的样式 */
  padding: 10px; /* 根据实际情况调整 */
}

.custom-card .card-header .card-title {
  /* 小区名字和地址的容器样式 */
  display: flex;
  flex-direction: column; /* 使名字和地址垂直排列 */
}

.custom-card .card-header .card-image {
  /* 图片的容器样式，这里主要为了演示，实际上图片已经在HTML中直接设置了样式 */
}

.custom-card .card-body {
  /* 详细信息区域的样式 */
  padding: 10px; /* 根据实际情况调整 */

}
</style>
